{include file='common/head'}
<!--员工发布&#45;&#45;说天喊地-->
<div style="overflow-x: hidden;width: 96%;margin: auto;padding-top: 1rem;">
    <blockquote class="layui-elem-quote layui-text">
        <div class="demoTable layui-form">
            <!--<table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>-->
            <div class="demoTable layui-form">
                <div class="layui-input-inline">
                    <input type="text" placeholder="请输入用户名称" name="ui_username" lay-verify="required"  autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <input type="text" placeholder="请输入用户手机号" name="ui_phone" lay-verify="required"  autocomplete="off" class="layui-input">
                </div>
                <button class="layui-btn " data-type="reload" ><i class="layui-icon">&#xe615;</i>搜索</button>
            </div>
        </div>
    </blockquote>

    <div class="layui-tab layui-tab-brief" lay-filter="test">
        <ul class="layui-tab-title">
            <li lay-id="1" class="layui-this">学生</li>
            <li lay-id="2">老师</li>
        </ul>
    <div class="demoTable layui-for">
        <table class="layui-table" lay-data="{height: 'full-150', url:'{:url('User/getUserList')}',edit:true, page:true, id:'testReload',loading:true}" lay-filter="demo">
            <thead>
            <tr>
                <th lay-data="{field:'ui_id',width:250,templet:'#id'}">编号</th>
                <th lay-data="{field:'ui_username', width:120}">用户名</th>
                <th lay-data="{field:'ui_email', width:180}">邮箱</th>
                <th lay-data="{field:'ui_phone',width:150}">手机号</th>
                <th lay-data="{field:'ui_gender',width:200,templet: '#ui_gender'}">性别 </th>
                <th lay-data="{field:'ui_id_number',width:150}">身份证号</th>
                <th lay-data="{field:'ui_country_name',width:150}">国家</th>
                <th lay-data="{field:'ui_city',width:150}">城市</th>
                <th lay-data="{field:'add_time',width:180}">注册时间</th>
                <th lay-data="{field:'update_time',width:180}">修改时间</th>
                <th lay-data="{fixed: '', width:200,fixed: 'right', align:'left', toolbar: '#barDemo'}">操作</th>
            </tr>
            </thead>
        </table>
        <script type="text/html" id="barDemo">
            <a title="查看详情" lay-event="info" href="#"><i class="layui-icon " style="font-size: 25px; color:#029587;line-height: 30px">&#xe770;</i></a>
        </script>
        <script type="text/html" id="ui_gender">
            {{#  if(d.ui_gender == 0){ }}
            <span style="color: #FF5722" >未知</span>
            {{#  } }}
            {{#  if(d.ui_gender == 1){ }}
            <span style="color: #5FB878" >男</span>
            {{#  } }}
            {{#  if(d.ui_gender == 2){ }}
            <span style="color: #5FB878" >女</span>
            {{#  } }}
        </script>

    </div>
    </div>
    {include file='common/footer'}
    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
    <script>
        layui.use(['table','form','element','laydate'], function(){
            var table = layui.table
                ,form = layui.form
                ,element = layui.element
                ,laydate = layui.laydate;
            var $ = layui.$, active = {
                reload: function(){
                    var ui_username = $('input[name="ui_username"]').val();
                    var ui_phone = $('input[name="ui_phone"]').val();
                    //执行重载
                    table.reload('testReload', {
                        where: {
                            ui_username:ui_username,
                            ui_phone:ui_phone
                        }
                    });
                }
            };

            $('.demoTable .layui-btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

            element.on('tab(test)', function(elem) {
                var role_id = $(this).attr('lay-id');
                table.reload('testReload', {
                    where: {
                        role_id: role_id,
                    }
                });
            });

            //监听表格复选框选择
            table.on('checkbox(demo)', function(obj){
                console.log(obj)
            });
            //监听工具条
            table.on('tool(demo)', function(obj){
                var data = obj.data;
                var event=obj.event;
                switch(event){
                    case 'info':
                        layer.open({
                            type: 2,
                            title: '查看详情',
                            shadeClose: true,
                            shade: false,
                            maxmin: true, //开启最大化最小化按钮
                            area: ['100%', '100%'],
                            content: '{:url("User/info")}?ui_id='+data.ui_id,
                            end: function () {
                                table.reload('tableId');
                            },
                        });
                        break;
                    case 'delete':
                        layer.confirm('确定删除么?', function(index){
                            $.ajax({
                                url:'{:url("admin/Admin/deleteAdmin")}',
                                type:'post',
                                dataType:'json',
                                data: {'id':data.id},
                                success:function(val){
                                    if(val.code == 200){
                                        obj.del();
                                        layer.msg(val.msg);
                                    }
                                    if(val.code == 400){
                                        layer.msg(val.msg);
                                    }
                                }
                            });
                        });
                        break;
                }
            });
        });
    </script>
    </body>
    </html>